<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" size="mini">
        <el-form-item label="GUID">
            <el-input disabled :value="node.uuid"></el-input>
        </el-form-item>
        <el-form-item label="集群" prop="clusterName">
            <el-input v-model="ruleForm.clusterName"></el-input>
        </el-form-item>
        <el-form-item label="集群编码" prop="clusterId">
            <el-input v-model="ruleForm.clusterId"></el-input>
        </el-form-item>
        <el-form-item label="区域" prop="regionId">
            <el-cascader
                ref="cascader"
                :options="areas"
                v-model="ruleForm.regionId"
                :show-all-levels="false"
                :props="{ checkStrictly: true, value: 'key', emitPath: false, }"
                :style="{width: '100%'}"
                @change="areaChange"
                clearable></el-cascader>
        </el-form-item>
        <el-form-item label="站点" prop="stationId">
            <el-select v-model="ruleForm.stationId" placeholder="请选择站点" :style="{width: '100%'}" @change="stationChange" clearable>
                <el-option v-for="(item, index) in stationList" :key="index" :label="item.label" :value="item.key"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="机房" prop="roomId">
            <el-select v-model="ruleForm.roomId" placeholder="请选择机房" :style="{width: '100%'}" @change="roomChange" clearable>
                <el-option v-for="(item, index) in roomList" :key="index" :label="item.label" :value="item.key"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="设备IP" prop="ip">
            <el-input v-model="ruleForm.ip"></el-input>
        </el-form-item>
        <el-form-item label="设备端口" prop="port">
            <el-input v-model="ruleForm.port"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        </el-form-item>
        <p v-show="false"><span>{{regionName}}{{stationName}}{{roomName}}</span></p>
    </el-form>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    regionName () {
      let name = ''
      this.loopFun(this.areas, this.ruleForm.regionId, (e, i, list) => {
        name = e.label
      })
      return name
    },
    stationName () {
      let name = ''
      this.stationList.forEach(ele => {
        if (ele.key === this.ruleForm.stationId) {
          name = ele.label
        }
      })
      return name
    },
    roomName () {
      let name = ''
      this.roomList.forEach(ele => {
        if (ele.key === this.ruleForm.roomId) {
          name = ele.label
        }
      })
      return name
    }
  },
  data () {
    const _this = this;
    const validateIp = (rule, value, callback) => {
      if (value) {
        const regIp =
          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
        if (regIp.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的IP'))
        }
      } else {
        callback()
      }
    }
    const validatePort = (rule, value, callback) => {
      if (value) {
        const regPort =
          /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
        if (regPort.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的端口'))
        }
      } else {
        callback()
      }
    }
    return {
      node: {},
      ruleForm: {
        clusterName: '',
        clusterId: '',
        regionId: '',
        stationId: '',
        roomId: '',
        ip: '',
        port: ''
      },
      stationList: [], // 站点
      roomList: [], // 机房
      rules: {
        clusterName: [
          { required: true, message: '请输入集群名称', trigger: 'blur' },
        ],
        clusterId: [
          { required: true, message: '请输入集群编码', trigger: 'blur' },
        ],
        regionId: [
          { required: true, message: '请选择区域', trigger: ['change', 'blur'] }
        ],
        stationId: [
          { required: true, message: '请选择站点', trigger: 'change' }
        ],
        ip: [
          { required: false, validator: validateIp, trigger: 'blur' }
        ],
        port: [
          { required: false, validator: validatePort, trigger: 'blur' }
        ]
      },
      areas: []
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 点击保存更新父组件里的this.data.collectionList
          this.$emit('changeNode', {
            uuid: this.node.uuid,
            params: {
              clusterId: this.ruleForm.clusterId,
              clusterName: this.ruleForm.clusterName,
              regionId: this.ruleForm.regionId,
              regionName: this.regionName,
              stationId: this.ruleForm.stationId,
              stationName: this.stationName,
              roomId: this.ruleForm.roomId,
              roomName: this.roomName,
              ip: this.ruleForm.ip,
              port: this.ruleForm.port
            }
          })
          console.log('this.ruleForm-collection', {
            clusterId: this.ruleForm.clusterId,
            clusterName: this.ruleForm.clusterName,
            regionId: this.ruleForm.regionId,
            regionName: this.regionName,
            stationId: this.ruleForm.stationId,
            stationName: this.stationName,
            roomId: this.ruleForm.roomId,
            roomName: this.roomName,
            ip: this.ruleForm.ip,
            port: this.ruleForm.port
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.ruleForm.clusterId = this.node.uuid.replace(/-/g, '')
    },
    init (data, item) {
      this.node = item
      this.ruleForm.clusterId = this.node.clusterId || this.node.uuid.replace(/-/g, '')
      console.log('点了集群', item)
      this.ruleForm.clusterName = this.node.clusterName || ''
      this.ruleForm.regionId = this.node.regionId || ''
      this.ruleForm.ip = this.node.ip || ''
      this.ruleForm.port = this.node.port || ''
      console.log(this.ruleForm)
      // this.ruleForm.stationId = this.node.stationId || '';
      // data.nodeList.filter((node) => {
      //     if (node.id === id) {
      //         this.node = node;
      //     }
      // })
      this.areaChange()
    },
    areaChange () {
      this.stationList = []
      this.roomList = []
      this.ruleForm.stationId = null
      this.ruleForm.roomId = null
      if (this.ruleForm.regionId) {
        this.$store.dispatch('regions/getStationsByAreaId', {
          regionTypes: 'station',
          parentId: this.ruleForm.regionId
        }).then(rsp => {
          this.stationList = [...rsp]
          if (this.node.stationId) {
            this.stationList.forEach(ele => {
              if (ele.key === this.node.stationId) {
                this.ruleForm.stationId = this.node.stationId
                this.stationChange()
              }
            })
          }
        })
      }
    },
    stationChange () {
      this.roomList = []
      this.ruleForm.roomId = null
      if (this.ruleForm.stationId) {
        this.$store.dispatch('regions/getRoomsByStationId', {
          regionTypes: 'room',
          parentId: this.ruleForm.stationId
        }).then(rsp => {
          this.roomList = [...rsp]
          if (this.node.roomId) {
            this.roomList.forEach(ele => {
              if (ele.key === this.node.roomId) {
                this.ruleForm.roomId = this.node.roomId
              }
            })
          }
        })
      }
      if (this.getDeviceList()) {
        setTimeout(() => {
          this.$bus.$emit('getDeviceList', { regionId: this.getDeviceList(), clusterId: this.ruleForm.clusterId })
        }, 300)
      } else {
        this.$bus.$emit('getDeviceList', null)
      }
    },
    roomChange () {
      if (this.getDeviceList()) {
        this.$bus.$emit('getDeviceList', { regionId: this.getDeviceList(), clusterId: this.ruleForm.clusterId })
      } else {
        this.$bus.$emit('getDeviceList', null)
      }
    },
    getDeviceList () {
      let regionId = ''
      if (this.ruleForm.stationId && this.ruleForm.roomId) {
        regionId = this.ruleForm.roomId
      } else if (this.ruleForm.stationId && !this.ruleForm.roomId) {
        regionId = this.ruleForm.stationId
      } else {
        regionId = ''
      }
      return regionId
    },
    // 递归数组
    loopFun (list, id, callback) {
      list.forEach((e, i) => {
        if (e.key === id) {
          callback(e, i, list)
        } else {
          if (e.children) {
            this.loopFun(e.children, id, callback)
          }
        }
      })
    }
  },
  mounted () {
    if (this.node.regionId) this.ruleForm.regionId = this.node.regionId
  }
}
</script>
<style lang="scss" scoped>

</style>
